<!-- 待我处理-->
<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadMore"
    >
      <van-checkbox-group v-model="checked" @change="change">
        <van-cell-group v-for="(item, index) in list" :key="item">
          <van-cell clickable @click="toggle(index)">
            <template #title>
              <view class="card-title van-multi-ellipsis--l2">
                <text>{{ item.owner?.name + '提交的' + item.processDefName }} </text>
              </view>
              <view class="sub-title">
                <text>开始时间: {{ timeFormat(item.taskCreateTime, 'yyyy-mm-dd hh:MM') }}</text>
              </view>
              <view class="sub-title">
                <text>结束时间: {{ timeFormat(item.taskEndTime, 'yyyy-mm-dd hh:MM') }}</text>
              </view>
              <view class="status">{{ getResult(item.taskResult) }}</view>
            </template>
            <template #right-icon>
              <van-checkbox :name="item" :ref="(el) => (checkboxRefs[index] = el)" @click.stop />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-list>
  </van-pull-refresh>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Toast } from '@/utils/uniapi/prompt';
  import { timeFormat } from '@/utils/index';
  import { ResultEnum } from '@/enums/httpEnum';
  import { getUserTodoList } from '../../../services/api/approveTask';
  import { DoneModel } from '../../../services/model/approveTask/doneModel';
  import { ProcessIndexModel } from '../../../services/model/approveTask/approveResultModel';
  import { isNotEmpty } from '../../../utils/is';
  const props = defineProps({
    code: {
      type: String,
      default: '',
    },
  });
  const emits = defineEmits(['selectItem']);
  const checked = ref([]);
  const checkboxRefs = ref([]);
  const toggle = (index) => {
    checkboxRefs.value[index].toggle();
  };
  const selectedArr = ref<ProcessIndexModel[]>([]);
  const change = () => {
    //对参数进行统一处理
    if (isNotEmpty(checked.value)) {
      checked.value.forEach((item: any) => {
        const startUser = item.staterUser || item.owner;
        selectedArr.value = selectedArr.value.concat(
          checked.value.map((item: any) => ({
            id: item.instanceId,
            name: item.processDefName,
            startUser: {
              id: startUser.id,
              avatar: startUser.avatar,
              name: startUser.name,
            },
            createTime: (item.createTime || item.startTime).substring(0, 16),
          })),
        );
      });
    } else {
      selectedArr.value = [];
    }
    emits('selectItem', selectedArr.value);
  };
  const getResult = (res) => {
    switch (res) {
      case 'agree':
        return '已同意';
      case 'refuse':
        return '已拒绝';
      case 'recall':
        return '已退回';
      default:
        return '';
    }
  };
  //请求参数
  const params = ref({
    pageSize: 10,
    pageNo: 1,
    finished: null,
    code: props.code,
    procDefName: '',
  });
  const list = ref<DoneModel[]>([]);
  const loading = ref(false);
  const finished = ref(false);
  const refreshing = ref(false);
  //下拉刷新
  const onRefresh = () => {
    list.value = []; // 清空列表数据
    finished.value = false;
    params.value.pageNo = 1; //默认加载第一页
    getList(); //加载数据
  };
  //加载更多
  const loadMore = () => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
    if (list.value.length == 0) {
      params.value.pageNo = 1;
    } else {
      params.value.pageNo++;
    }
    loading.value = false;
    getList();
  };
  // 加载数据
  const getList = () => {
    loading.value = true; // 将 loading 设置为 true，表示处于加载状态
    //待我处理
    getUserTodoList(params.value).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        if (refreshing.value) {
          refreshing.value = false;
        }
        loading.value = false;
        if (params.value.pageNo == 1) {
          list.value = data.data.records;
        } else {
          data.data.records.forEach((t) => list.value.push(t));
        }
        // 判断当前页是否为最后一页
        if (params.value.pageNo * params.value.pageSize > data.data.total) {
          finished.value = true;
        }
      } else {
        finished.value = true;
        Toast(data.msg);
      }
    });
  };
</script>

<style scoped lang="scss">
  .item-list {
    width: 80%;
    display: flex;
  }
  ::v-deep .van-cell__title {
    min-width: 70%;
  }
  .van-cell-group {
    padding: 20rpx;
  }
  .van-cell {
    padding: 6rpx 8rpx;
  }
  .sub-title {
    color: #787878;
    font-size: 28rpx;
  }
  .card-title {
    color: $uni-text-color;
    font-weight: 600;
  }
  .status {
    color: #56b77a;
    font-weight: 600;
    font-size: 30rpx;
  }
</style>
